<template>
  <div class="h-100 d-flex flex-column">
    <div class="container d-flex justify-content-center my-3">
      <div class="title h1 flex-grow-1 text-center">匠心后台管理系统</div>
      <el-dropdown v-if="user" @command="handleClick">
        <span class="el-dropdown-link">
          <img :src="user.avatar" class="rounded-circle" style="width: 3rem; height: 3rem" alt="">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu>
          <el-dropdown-item icon="el-icon-plus" command="LOGOUT">退出</el-dropdown-item>
          <el-dropdown-item icon="el-icon-plus">
            <a :href="Home"> 匠心装饰</a>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div v-else>
        <a :href="adminLogin" class="fs-4">登录</a>
      </div>
    </div>
    <div class="flex-grow-1 d-flex align-items-stretch">
      <el-menu class="align-items-stretch flex-shrink-0" style="width: 15rem;"
               :default-active="fullPath"
               active-text-color="#409efd"
               router>
        <el-menu-item v-for="item in menuList" v-if="!item.children || item.children.length === 0" :key="item.menuName" :index="item.menuPath">
          <!--          <i :class="item.menuIcon"></i>-->
          <template #title>
            {{ item.menuName }}
          </template>
        </el-menu-item>
        <el-submenu :key="item.menuName" :index="item.menuPath" v-if="item?.children?.length > 0">
          <template #title>
            {{ item.menuName }}
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="child in item.children" :key="child.menuName" :index="child.menuPath">
              {{ child.menuName }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
      <router-view class="flex-grow-1"></router-view>
    </div>
  </div>
</template>

<script>
import {AdminImg, AdminImgType, adminLogin, AdminMessageBoard, Home, logPage, monitorPage, userPage} from "@/index";
import {postJson} from "@/api/http";
import {User_logout} from "@/api/api";
import {mapActions} from "vuex";
import user from "../../store/user";

export default {
  name: "HomeComponent",
  data() {
    return {
      AdminMessageBoard,
      Home,
      AdminImg,
      adminLogin,
      fullPath: this.$route.fullPath,
      menuList: [
        {
          menuName: "类型",
          menuPath: AdminImgType,
          menuIcon: "el-icon-connection",
        },
        {
          menuName: "图片",
          menuPath: AdminImg,
          menuIcon: "el-icon-connection",
        },
        {
          menuName: "留言板",
          menuPath: AdminMessageBoard,
          menuIcon: "el-icon-connection",
        },
        {
          menuName: "系统管理",
          menuPath: '',
          menuIcon: "el-icon-connection",
          children: [
            {
              menuName: "用户管理",
              menuPath: userPage,
              menuIcon: "el-icon-connection",
            },
            {
              menuName: "日志管理",
              menuPath: logPage,
              menuIcon: "el-icon-connection",
            },
            {
              menuName: "服务监控",
              menuPath: monitorPage,
              menuIcon: "el-icon-connection",
            }
          ]
        },
      ],
    }
  },
  computed: {
    user() {
      return user.state.user
    }
  },
  methods: {
    ...mapActions('user', [
      'xUserToken',
      'xUser',]),
    async handleClick(command) {
      if (command === 'LOGOUT') {
        await postJson(User_logout)
        await this.xUserToken(null)
        await this.xUser(null)
        await this.$router.push(adminLogin); // 登录成功后跳转到dashboard或其他页面
      }
    }
  },
}
</script>

<style scoped>
</style>